<script setup>
import useUserStore from '@/store/user';
import { showFailToast, showSuccessToast } from 'vant';
import { ref, toRaw } from 'vue';
import { useRouter } from 'vue-router';
import { addComment, reportPost } from '@/api/User'

const userStore = useUserStore();
const router = useRouter();

const showDialog = ref(false);
const checked = ref('');

const rawPostsList = toRaw(userStore.userInfo.postsList);
const post = rawPostsList.find(post => post.postId == router.currentRoute.value.params.postId);

const message = ref('');

const submitComment = async () => {
    if (message.value.trim() === '') {
        message.value = '';
        showFailToast('评论内容不能为空');
        return;
    }

    // console.log(post.postId, userStore.userInfo.userid)

    // console.log(userStore.userInfo.userid)
    await addComment({
        postId: post.postId,
        userId: userStore.userInfo.userid,
        content: message.value
    });
    // console.log(res)
    message.value = '';
    showSuccessToast('感谢您的帮助');
};


// 举报提交
const confirmReport = async () => {
    if (checked.value === '') {
        showFailToast('请选择举报类型');
        return;
    }



    const { code,msg } = await reportPost({
        postId: post.postId,
        reason: checked.value,
        userId: userStore.userInfo.userid
    })

    if (code === 1 && msg === 'success') {
        showSuccessToast('举报成功');
        checked.value = ''
        showDialog.value = false;
    } else {
        showFailToast('举报失败，请稍后再试');
    }
}

// 取消举报
const cancelReport = () => {
    checked.value = ''
    showDialog.value = false;
}

</script>

<template>
    <section>
        <van-nav-bar
            left-text="返回"
            left-arrow
            @click-left="router.go(-1)"
            title="发表详情" fixed placeholder safe-area-inset-top />
    </section>

    <div class="post-detail">
        <h3 class="post-user">用户：{{ post.username }}</h3>
        <span class="post-created-at" style="color: #999;">发布日期：{{ post.createdAt }}</span>
        <img style="margin-top: 10px;" :src="post.imageUrl" alt="帖子图片" class="post-image">
        <van-button style="float: right;" icon="warning-o" round size="mini" type="default"
            @click="showDialog = true">举报</van-button>
        <div class="comment-input">
            <van-field
                v-model="message"
                left-icon="smile-o"
                clearable
                rows="1"
                autosize
                label="视界"
                type="textarea"
                maxlength="200"
                placeholder="善语结善缘，恶语伤人心"
                show-word-limit />
            <van-button block type="primary" @click="submitComment">提交帮助</van-button>
        </div>

    </div>

    <van-dialog v-model:show="showDialog" title="这张照片有什么问题？" @cancel="cancelReport" @confirm="confirmReport"
        show-cancel-button>
        <van-radio-group v-model="checked">
            <van-cell-group inset>
                <van-cell title="照片让人感到反感" clickable @click="checked = '1'">
                    <template #right-icon>
                        <van-radio name="1" />
                    </template>
                </van-cell>
                <van-cell title="照片里有我，但我不喜欢这张照片" clickable @click="checked = '2'">
                    <template #right-icon>
                        <van-radio name="2" />
                    </template>
                </van-cell>
                <van-cell title="我认为它不应出现在 慧目之援" clickable @click="checked = '3'">
                    <template #right-icon>
                        <van-radio name="3" />
                    </template>
                </van-cell>
                <van-cell title="照片是垃圾信息" clickable @click="checked = '4'">
                    <template #right-icon>
                        <van-radio name="4" />
                    </template>
                </van-cell>
            </van-cell-group>
        </van-radio-group>
    </van-dialog>
</template>

<style scoped>
.post-detail {
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.post-created-at {
    font-size: 12px;
}

.post-user {
    margin-top: 5px;
    color: #999;
}

.post-image {
    width: 50vw;
    height: auto;
    margin: 10px 20vw;
}

.comment-input {
    margin: 10px;
}
</style>